<template>
  <view class="invite-details-container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">邀请详情</view>
    </view>
    
    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <view 
        v-for="(tab, index) in filterTabs" 
        :key="index"
        :class="['tab-item', { active: currentTab === tab.value }]"
        @click="switchTab(tab.value)"
      >
        {{ tab.label }}
      </view>
    </view>
    
    <!-- 统计概览 -->
    <view class="stats-overview">
      <view class="overview-item">
        <view class="overview-value">{{ totalCount }}</view>
        <view class="overview-label">总邀请数</view>
      </view>
      
      <view class="overview-item">
        <view class="overview-value">{{ completedCount }}</view>
        <view class="overview-label">已转化</view>
      </view>
      
      <view class="overview-item">
        <view class="overview-value">{{ totalRewards }}</view>
        <view class="overview-label">总奖励</view>
      </view>
    </view>
    
    <!-- 邀请列表 -->
    <view class="invite-list">
      <view 
        v-for="(invite, index) in inviteList" 
        :key="index"
        class="invite-item"
      >
        <view class="invite-avatar">
          <image 
            :src="invite.invitee.avatar || '/static/icons/default-avatar.png'" 
            class="avatar-image"
          />
        </view>
        
        <view class="invite-info">
          <view class="invite-name">{{ invite.invitee.nickname || '新用户' }}</view>
          <view class="invite-time">注册时间：{{ formatDate(invite.registerTime) }}</view>
          <view class="invite-consume" v-if="invite.firstConsumeTime">
            首次消费：{{ formatDate(invite.firstConsumeTime) }}
          </view>
        </view>
        
        <view class="invite-status">
          <view 
            :class="['status-badge', invite.status === 'completed' ? 'completed' : 'pending']"
          >
            {{ invite.status === 'completed' ? '已转化' : '待转化' }}
          </view>
          <view class="reward-points">+{{ invite.rewardPoints }}积分</view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="inviteList.length === 0 && !isLoading">
        <image src="/static/icons/empty.png" class="empty-icon" />
        <view class="empty-text">暂无邀请记录</view>
        <view class="empty-tip">快去邀请好友吧！</view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <view v-if="isLoadingMore" class="loading-text">加载中...</view>
        <view v-else class="load-more-btn" @click="loadMore">加载更多</view>
      </view>
      
      <!-- 没有更多 -->
      <view class="no-more" v-if="inviteList.length > 0 && !hasMore">
        <view class="no-more-text">没有更多了</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getInviteDetails } from '@/api/invitations.js'

export default {
  name: 'InviteDetailsPage',
  
  data() {
    return {
      currentTab: 'all',
      filterTabs: [
        { label: '全部', value: 'all' },
        { label: '已转化', value: 'completed' },
        { label: '待转化', value: 'pending' }
      ],
      inviteList: [],
      totalCount: 0,
      completedCount: 0,
      totalRewards: 0,
      currentPage: 1,
      pageSize: 20,
      hasMore: true,
      isLoading: false,
      isLoadingMore: false
    }
  },
  
  onLoad() {
    this.loadInviteDetails()
  },
  
  onReachBottom() {
    if (this.hasMore && !this.isLoadingMore) {
      this.loadMore()
    }
  },
  
  onPullDownRefresh() {
    this.refreshData().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
  
  methods: {
    /**
     * 切换标签
     */
    switchTab(tab) {
      if (this.currentTab === tab) return
      
      this.currentTab = tab
      this.refreshData()
    },
    
    /**
     * 刷新数据
     */
    async refreshData() {
      this.currentPage = 1
      this.inviteList = []
      this.hasMore = true
      await this.loadInviteDetails()
    },
    
    /**
     * 加载邀请详情
     */
    async loadInviteDetails() {
      if (this.isLoading) return
      
      this.isLoading = true
      
      try {
        const params = {
          page: this.currentPage,
          limit: this.pageSize,
          status: this.currentTab
        }
        
        const result = await getInviteDetails(params)
        
        if (result.success) {
          const data = result.data
          
          if (this.currentPage === 1) {
            this.inviteList = data.invitations
          } else {
            this.inviteList.push(...data.invitations)
          }
          
          this.totalCount = data.total
          this.hasMore = this.currentPage < data.totalPages
          
          // 计算统计数据
          this.calculateStats()
        } else {
          this.showError(result.message || '加载邀请详情失败')
        }
      } catch (error) {
        console.error('加载邀请详情失败:', error)
        this.showError('加载邀请详情失败')
      } finally {
        this.isLoading = false
      }
    },
    
    /**
     * 加载更多
     */
    async loadMore() {
      if (!this.hasMore || this.isLoadingMore) return
      
      this.isLoadingMore = true
      this.currentPage++
      
      try {
        await this.loadInviteDetails()
      } finally {
        this.isLoadingMore = false
      }
    },
    
    /**
     * 计算统计数据
     */
    calculateStats() {
      this.completedCount = this.inviteList.filter(invite => invite.status === 'completed').length
      this.totalRewards = this.inviteList.reduce((sum, invite) => sum + invite.rewardPoints, 0)
    },
    
    /**
     * 格式化日期
     */
    formatDate(dateStr) {
      if (!dateStr) return ''
      
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    
    /**
     * 显示错误提示
     */
    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.invite-details-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.nav-bar {
  background: white;
  padding: 20rpx 40rpx;
  text-align: center;
  border-bottom: 1rpx solid #e0e0e0;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.filter-tabs {
  display: flex;
  background: white;
  padding: 20rpx 40rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 12rpx;
  transition: all 0.3s ease;
  
  &.active {
    background: #667eea;
    color: white;
  }
}

.stats-overview {
  display: flex;
  background: white;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.overview-item {
  flex: 1;
  text-align: center;
  
  &:not(:last-child) {
    border-right: 1rpx solid #e0e0e0;
  }
}

.overview-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 8rpx;
}

.overview-label {
  font-size: 24rpx;
  color: #666;
}

.invite-list {
  margin: 20rpx;
}

.invite-item {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.invite-avatar {
  margin-right: 24rpx;
}

.avatar-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.invite-info {
  flex: 1;
}

.invite-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.invite-time,
.invite-consume {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.invite-status {
  text-align: right;
}

.status-badge {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
  margin-bottom: 8rpx;
  
  &.completed {
    background: #52c41a;
    color: white;
  }
  
  &.pending {
    background: #faad14;
    color: white;
  }
}

.reward-points {
  font-size: 26rpx;
  color: #52c41a;
  font-weight: bold;
}

.empty-state {
  text-align: center;
  padding: 120rpx 40rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.empty-tip {
  font-size: 26rpx;
  color: #999;
}

.load-more {
  text-align: center;
  padding: 40rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.load-more-btn {
  font-size: 28rpx;
  color: #667eea;
  padding: 20rpx 40rpx;
  border: 2rpx solid #667eea;
  border-radius: 50rpx;
  display: inline-block;
}

.no-more {
  text-align: center;
  padding: 40rpx;
}

.no-more-text {
  font-size: 26rpx;
  color: #999;
}
</style>
